<template>
	<view class="simu-box page">
		<view class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;">
			<view class="uni-timeline-item uni-timeline-first-item">
				<view class="uni-timeline-item-divider">
					<image class="divider-image" src="http://t.cn/EcH4uSM"/></view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title">
						您准备购买
					</view>
					<view class="datetime">
						{{productName}}
					</view>
				</view>
			</view>
			<view class="uni-timeline-item">
				<view class="uni-timeline-item-divider">
					<image class="divider-image" src="http://t.cn/EcH4k9Q"/>
				</view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title">实名认证</view>
					<view class="datetime">{{custName}}{{cardNo}}</view>
				</view>
			</view>
			<view class="uni-timeline-item">
				<view class="uni-timeline-item-divider" v-if="whetherRisk === '去测评'"></view>
				<view class="uni-timeline-item-divider" v-if="whetherRisk == '查看'">
					<image class="divider-image" src="http://t.cn/EcH4k9Q"/>
				</view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title" @click="toFengxianceping">风险调查问卷 
					<view class="ques-image-box"></view>
				</view>
				<!-- <view class="datetime">未完成</view> -->
				<view class="datetime" v-if="whetherRisk == '查看'">已完成</view>
				<view class="datetime" v-if="whetherRisk === '去测评'">未完成</view>
					<!-- 稳健性（你的风险评级不合格， -->
				</view>
			</view>
			<!-- <view class="uni-timeline-item">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title">签风险不匹配告知书</view>
				</view>
			</view> -->
			<view class="uni-timeline-item">
				<view class="uni-timeline-item-divider" v-if="renzhengInfo.name == ''"></view>
				<view class="uni-timeline-item-divider" v-if="renzhengInfo.name !== ''">
					<image class="divider-image" src="http://t.cn/EcH4k9Q"/>
				</view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title" @click="toRenzheng">投资者认证信息</view>
					<view class="datetime">您已认定为是{{renzhengInfo.name}}</view>
					<view class="datetime orange" @click="toRenzhengDetail">查看详情</view>
				</view>
			</view>
			<view class="uni-timeline-item ">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title">预约金额<view class="ques-image-box">
							<image class="ques-image" src="http://t.cn/EcHbIzX" mode=""></image>
						</view>
					</view>
					<view class="datetime">您预约的额度为{{balance}}万
					<view class="orange" @click="toCancel" v-if="proCheXiaoStatus.cStatus==0||proCheXiaoStatus.cStatus==7">撤销</view>
					<view v-else  class="datetime">{{proCheXiaoStatus.statusRemark}}</view>
					</view>
				</view>
			</view>
			
			<view class="uni-timeline-item">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title">双录<view class="ques-image-box">
							<image class="ques-image" src="http://t.cn/EcHbwXC" mode=""></image>
						</view>
						<view class="datetime" v-if="proCheXiaoStatus.cStatus==1">请点击此处进行双录</view>
						<view class="datetime orange" v-if="proCheXiaoStatus.cStatus !=1 " @click="toShuanglu">请点击此处进行双录</view><!--普通投资者必须双录，专业投资者不双录,去掉双录链接-->
					</view>
				</view>
			</view>
			<view class="uni-timeline-item">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title">合同签订</view>
					<view class="datetime" v-if="hetongStatus.name=='信息未填写'">
						信息未填写<view class="datetime orange" v-if="proCheXiaoStatus.cStatus !=1"  @click="toHetong">合同申请</view>
						<view class="datetime" v-if="proCheXiaoStatus.cStatus==1"  @click="toHetong">合同申请</view>
						
					</view>
					<view class="datetime" v-if="hetongStatus.name=='审批中'">
						审批中<view class="datetime orange" @click="toHetongSelect">查看</view>
					</view>
					<view class="datetime" v-if="hetongStatus.name=='申请驳回'">
						申请驳回<view class="datetime orange"  @click="toHetongEdit">编辑</view>
					</view>
					<view class="datetime" v-if="hetongStatus.name=='已签约'">
						已签约<view class="datetime orange" @click="toHetongSelect">查看</view>
					</view>
					<view class="datetime" v-if="hetongStatus.name=='已撤销'">
						已撤销<view class="datetime orange" @click="toHetongSelect">查看</view>
					</view>
				</view>
			</view>
			<view class="uni-timeline-item">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title">填写缴款信息</view>
					<view class="datetime" v-if="jiaokuanStatus.name=='信息未填写'">
						信息未填写
						<view class="datetime orange" v-if="proCheXiaoStatus.cStatus !=1"  @click="toJiaokuan"> 缴款申请</view>
						<view class="datetime" v-if="proCheXiaoStatus.cStatus==1"  @click="toJiaokuan"> 缴款申请</view>
						<view class="ques-image-box"></view>
					</view>
					<view class="datetime" v-if="jiaokuanStatus.name=='确认中'">
						确认中<view class="datetime orange" @click="toJiaokuanEdit">编辑</view>
					</view>
					<view class="datetime" v-if="jiaokuanStatus.name=='已到账'">
						已到账<view class="datetime orange" @click="toJiaokuanSelect">查看</view>
					</view>
					<view class="datetime" v-if="jiaokuanStatus.name=='已撤销'">
						已撤销<view class="datetime orange" @click="toJiaokuanSelect">查看</view>
					</view>
				</view>
			</view>
			<view class="uni-timeline-item">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title">客服回访</view>
				</view>
			</view>
			<view class="uni-timeline-item uni-timeline-last-item">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="uni-timeline-item-content-title">流程结束，请在客户详情查看收益</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	//引入全局变量
	import global_ from '../../../../../components/tool/productGlobal';
	var _self;
	export default {
		onShow(){
			this.getData();
		},
		onLoad: function (option) { 
			//option为object类型，会序列化上个页面传递的参数
			//?projId=427&balance=100&custid=200000283512&custname=张凤燕&yuyueId=3003
			console.info("获取到的上一页参数。。。")
			console.log(JSON.stringify(option));
			this.projId=option.projId;//产品ID
			this.productName=option.proName;
			this.balance=option.balance;
			this.custId=option.custid;
			this.custName=option.custname;
			this.reserveno=option.yuyueId;
			this.cardNo='',
			this.getData();
			_self=this;
			console.log(this.proCheXiaoStatus.statusRemark);
			this.whetherRisk = uni.getStorageSync('whetherRisk');
			console.log('【风险测评结果-------】'+uni.getStorageSync('whetherRisk'));   // 拿到上个页面的  风险测状态
			// uni.setStorageSync('whetherRisk',this.isRisk);
		},
		data() {
			return {
				productName:'产品名称'  ,//产品名称
				balance:'',//预约金额
				custId:'',//客户编号
				custName:'',//客户名称
				cardNo:'',//身份证号码
				reserveno:'',//预约编号
				renzhengInfo:[],//认证信息
				jiaokuanStatus:[],//缴款状态
				hetongStatus:[],//合同填写状态
				proCheXiaoStatus:[],//撤销状态
				resultData:'',
				url:global_.api.SIMU_YUYUE_API,
				chexiaoUrl:global_.api.CHEXIAO_YUYUE_API,
				whetherRisk:''
			};
		},methods:{
			getData(){
				uni.showNavigationBarLoading();
					uni.request({
					method: 'GET',
					url: this.url,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						custId: this.custId,
						reserveno: this.reserveno
					},
				
					dataType: 'json',
					success: (res) => {
						var resultData = res.data.data;
						this.resultData=resultData;
						this.cardNo=resultData.smrzInfo.cardNo;
						this.renzhengInfo=resultData.renzhengInfo;
						this.hetongStatus=resultData.heTongQianDingStatus;
						this.jiaokuanStatus=resultData.jiaokuanStatus;
						this.proCheXiaoStatus=resultData.proCheXiaoStatus;
						console.log(JSON.stringify(this.proCheXiaoStatus));
						console.log('xxxxxxxxxxxxstatus'+this.proCheXiaoStatus.statusRemark);
					},
					fail: (res) => {
						console.log("..............................................fail");
						console.log(JSON.stringify(res));
						//this.text = 'request fail';
					},
					complete: (res) => {
						//停止当前页面下拉刷新。
						uni.hideNavigationBarLoading();
					}
				})
			},
			toYuyue(){
				uni.navigateTo({
					// url: './yuyue/yuyue',
					url:'',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toCancel(){
				console.log('用户点击确定'+_self.chexiaoUrl);
				uni.showModal({
					title: '温馨提示',
					content: '您确定要撤销吗？',
					success: function (res) {
						if (res.confirm) {
							uni.showNavigationBarLoading();
								uni.request({
								method: 'POST',
								url: _self.chexiaoUrl,
								header: {
									'content-type': 'application/x-www-form-urlencoded'
								},
								data: {
									reserveno: _self.reserveno
								},
							
								dataType: 'json',
								success: (res) => {
									var resultData = res.data.data;
									_self.proCheXiaoStatus=resultData;
									console.log(JSON.stringify(_self.resultData));
								},
								fail: (res) => {
									console.log("..............................................fail");
									console.log(JSON.stringify(res));
									//this.text = 'request fail';
								},
								complete: (res) => {
									//停止当前页面下拉刷新。
									uni.hideNavigationBarLoading();
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toFengxianceping(){
				if(this.whetherRisk === '查看'){
					
				}else{
					uni.navigateTo({
						url: './fenxianceping/simufengxianceping',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toRenzheng(){
				if(this.renzhengInfo.name !== ''){
					return false;
				}else{
					uni.navigateTo({
						url: './touzizherenzheng/touzizherenzheng',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toRenzhengDetail(){
				uni.navigateTo({
					url: './touzizherenzheng/touzizherenzheng',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toShuanglu(){
				if(this.proCheXiaoStatus.cStatus==1){
					return false;
				}else{
					uni.navigateTo({
						url: './shuanglu/shuanglu',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toShimingrenzheng(){
				uni.navigateTo({
					// url: './shimingrenzheng/renzheng',
					url:'',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toHetong(){
				if(this.proCheXiaoStatus.cStatus==1){
					return false
				}else{
					uni.navigateTo({
						url: './hetong/hetong?custid='+this.custId+'&projId='+this.projId+
						'&balance='+this.balance+'&proName='+this.productName+'&custname='+this.custName+'&yuyueId='+this.reserveno,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toHetongEdit(){
				if(this.proCheXiaoStatus.cStatus==1){
					return false
				}else{
					uni.navigateTo({
						url: './hetong/hetongEdit?custid='+this.custId+'&projId='+this.projId+
						'&balance='+this.balance+'&proName='+this.productName+'&custname='+this.custName+'&yuyueId='+this.reserveno,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toHetongSelect(){
				if(this.proCheXiaoStatus.cStatus==1){
					return false
				}else{
					uni.navigateTo({
						url: './hetong/hetongSelect?custid='+this.custId+'&projId='+this.projId+
						'&balance='+this.balance+'&proName='+this.productName+'&custname='+this.custName+'&yuyueId='+this.reserveno,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toJiaokuan(){
				if(this.proCheXiaoStatus.cStatus==1){
					return false;
				}else{
					uni.navigateTo({
						url: './jiaokuan/jiaokuan?custid='+this.custId+'&projId='+this.projId+
						'&balance='+this.balance+'&proName='+this.productName+'&custname='+this.custName+'&yuyueId='+this.reserveno,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toJiaokuanEdit(){
				uni.navigateTo({
					url: './jiaokuan/jiaokuanEdit?custid='+this.custId+'&projId='+this.projId+
					'&balance='+this.balance+'&proName='+this.productName+'&custname='+this.custName+'&yuyueId='+this.reserveno,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toJiaokuanSelect(){
				uni.navigateTo({
					url: './jiaokuan/jiaokuanSelect?custid='+this.custId+'&projId='+this.projId+
					'&balance='+this.balance+'&proName='+this.productName+'&custname='+this.custName+'&yuyueId='+this.reserveno,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	page {
		background: rgb(255, 255, 255);
	}
	.divider-image{
		height: 50upx;
		width: 50upx;
	}
	.simu-box {
		padding: 50upx 0 50upx 50upx;
	}

	.uni-timeline-item {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		position: relative;
		padding-bottom: 10upx;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
		min-height: 100upx;
	}

	.uni-timeline-item .uni-timeline-item-content {
		padding-left: 40upx;
		color: #000000;
		font-weight: bold;
		font-size: 17px;
	}

	.uni-timeline-item .uni-timeline-item-divider {
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		position: relative;
		width: 50upx;
		height: 50upx;
		top: 0;
		border-radius: 50%;
		background-color: rgba(221, 221, 221, 1);
	}

	.uni-timeline-item-divider::before,
	.uni-timeline-item-divider::after {
		position: absolute;
		left: 25upx;
		width: 0.5px;
		top: 25px;
		height: 100vh;
		content: '';
		background: inherit;
		
	}
	.uni-timeline-last-item .uni-timeline-item-divider::before,
	.uni-timeline-last-item .uni-timeline-item-divider::after {
		
		width: 0px;
	
		
	}
	.uni-timeline-item.uni-timeline-last-item.uni-timeline-item-divider::before {}

	.datetime {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		font-size: 14px;

	}

	.uni-timeline-item-content-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		display: inline-block;
	}

	.ques-image-box,
	.ques-image {

		width: 34upx;
		height: 34upx;
	}
	.datetime .ques-image-box,
		.datetime .ques-image {
	
			width: 28upx;
			height: 28upx;
		}

	.ques-image-box {
		margin: 0 10upx;
	}

	.orange {
		text-decoration: underline;
		color: rgba(255, 128, 27, 1);
	}
	.orange-bg{
		background-color:rgb(196, 156, 90)!important;
	}
	.uni-timeline-item .remove-after:after{
		content:'';
		display: block;
		background-color: rgba(221, 221, 221, 1)!important;
	}
</style>
